﻿
    <label style="width: 70px; margin-top: 10px; font-size: 12px; font-weight: bold">Page size</label>
    <div id="showpag" class="dropdown" style="float: right;">
        <span class="dropdown-toggle" data-toggle="dropdown" id="sPageSize">10</span>
        <ul class="dropdown-menu" onclick="GetPage()">
            <li>10</li>
            <li>25</li>
            <li>50</li>
            <li>100</li>
            <li>200</li>
        </ul>
    </div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.dropdown-menu li').click(function (e) {
            e.preventDefault();
            var pageID = $(this).html();
            $.ajax({
                type: "Get",
                url: '@Url.Action("Page")',
                    async: false,
                    cache: false,
                    traditional: true,
                    data: { PageID: pageID },
                    success: function (result) {
                        $("#divList").html(result);
                        $("#sPageSize").text(pageID);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(xhr.responseText);
                        alert(thrownError);
                    }
             });
        });
    });
   
</script>